<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>前端开发</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        .font {
            font-family: 黑体;
            font-weight: normal;
        }
    </style>
</head>

<body>
<div id="app">
    <div>
        <header>
            <h1 align="center">{{name}}</h1>
        </header>
        <center>
            <div id="timer" style="color:red">{{time}}</div>
            <input type="hidden" v-model="time" id="timetime">
        </center>
    </div>
    <p>
        <label>一、选择题（每题{{singleScore}}分，共{{paperStructures.singleChoiceScore}}分）</label><br>
    <ol>
        <li v-for="(singleChoices,index) in singleChoicess">
            <label class="font">{{singleChoices.content}}</label><br>
            <div v-for="(question,index) in questionss">
                <input type="hidden" v-if="singleChoices.id==question.singleChoiceId" :data-index="singleChoices.id"
                       :value="question.questionNum"
                       id="singleChoiceNum[singleChoices.id]">
                <input type="hidden" v-if="singleChoices.id==question.singleChoiceId" :data-indexs="singleChoices.id"
                       :value="question.paperId"
                       id="singleChoiceNums[index]">
            </div>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="A"
                   @change="single(index,singleChoices.id,$event)">（A）{{singleChoices.optiona}}<br>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="B"
                   @change="single(index,singleChoices.id,$event)">（B）{{singleChoices.optionb}}<br>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="C"
                   @change="single(index,singleChoices.id,$event)">（C）{{singleChoices.optionc}}<br>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="D"
                   @change="single(index,singleChoices.id,$event)">（D）{{singleChoices.optiond}}<br>
        </li>
        <!-- <li>
             Java语言支持：<br>
             <input type="radio" name="key2.2" value="A">（A）单继承<br>
             <input type="radio" name="key2.2" value="B">（B）多继承<br>
             <input type="radio" name="key2.2" value="C">（C）单继承和多继承都支持<br>
             <input type="radio" name="key2.2" value="D">（D）单继承和多继承都不支持<br>
         </li>-->
    </ol>
    </p>
    <p>
        <label>二、多选题（每题{{multipleChoiceScores}}分，共{{paperStructures.multipleChoiceScore}}分）</label><br>
    <ol>
        <li v-for="(multipleChoices,index) in multipleChoicess">
            <label class="font">{{multipleChoices.content}}</label><br>
            <div v-for="(question,index) in questionss">
                <input type="hidden" v-if="multipleChoices.id==question.multipleChoiceId"
                       :data-multiple="multipleChoices.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="multipleChoices.id==question.multipleChoiceId"
                       :data-multiples="multipleChoices.id"
                       :value="question.paperId">
            </div>
            <input type="checkbox" :name="index" value="A" :data-multipless="multipleChoices.id"
                   @change="checkNames(index,multipleChoices.id,multipleChoices.id,$event)">（A）{{multipleChoices.optiona}}<br>
            <input type="checkbox" :name="index" value="B" :data-multipless="multipleChoices.id"
                   @change="checkNames(index,multipleChoices.id,multipleChoices.id,$event)">（B）{{multipleChoices.optionb}}<br>
            <input type="checkbox" :name="index" value="C" :data-multipless="multipleChoices.id"
                   @change="checkNames(index,multipleChoices.id,multipleChoices.id,$event)">（C）{{multipleChoices.optionc}}<br>
            <input type="checkbox" :name="index" value="D" :data-multipless="multipleChoices.id"
                   @change="checkNames(index,multipleChoices.id,multipleChoices.id,$event)">（D）{{multipleChoices.optiond}}<br>
        </li>
        <!-- <li>
             Java语言支持：<br>
             <input type="checkbox" name="key2.2" value="A">（A）单继承<br>
             <input type="checkbox" name="key2.2" value="B">（B）多继承<br>
             <input type="checkbox" name="key2.2" value="C">（C）单继承和多继承都支持<br>
             <input type="checkbox" name="key2.2" value="D">（D）单继承和多继承都不支持<br>
         </li>-->
    </ol>
    </p>
    <p>
        <label>三、判断题（每题{{trueOrFalseScores}}分，共{{paperStructures.trueOrFalseScore}}分）</label><br>
    <ol>
        <li v-for="(trueOrFalses,index) in trueOrFalsess">
            <label class="font">{{trueOrFalses.content}}</label>
            <span v-for="(question,index) in questionss">
                <input type="hidden" v-if="trueOrFalses.id==question.trueOrFalseId" :data-trueOrFalses="trueOrFalses.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="trueOrFalses.id==question.trueOrFalseId"
                       :data-trueOrFalsess="trueOrFalses.id"
                       :value="question.paperId">
            </span>
            <input type="radio" value="1" style="margin-left: 10px" :data-trueOrFalse="trueOrFalses.id"
                   @change="trueOrFalse(trueOrFalses.id,trueOrFalses.id,$event)">对
            <input type="radio" value="0" style="margin-left: 5px" :data-trueOrFalse="trueOrFalses.id"
                   @change="trueOrFalse(trueOrFalses.id,trueOrFalses.id,$event)">错
            <br>
        </li>
        <!-- <li>
             在状态图中，终止状态在一个状态图中允许有任意多个。
             <input type="radio" name="key4.2" value="true">对
             <input type="radio" name="key4.2" value="false">错
             <br>
         </li>-->
    </ol>
    </p>
    <p>
        <label>四、填空题（每空{{completionScores}}分，共{{paperStructures.completionScore}}分）</label><br>
    <ol id="inputbox">
        <li v-for="(blankFillings,index) in blankFillingss">
            <label class="font">{{blankFillings.content}}</label>
            <span v-for="question in questionss">
                <input type="hidden" v-if="blankFillings.id==question.blankFillingId" :data-blank="blankFillings.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="blankFillings.id==question.blankFillingId" :data-blanks="blankFillings.id"
                       :value="question.paperId">
            </span>
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none; width: 150px;" name="key1.1"
                   value="" :data-blankFillings="blankFillings.id"
                   @change="blank(blankFillings.id,blankFillings.id,$event)"><br>
        </li>
        <!--<li>
            对象最突出的特征是
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.1"
                   value="">
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.2"
                   value="">
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.3"
                   value="">
            <br>
        </li>-->
    </ol>
    </p>
    <p>
        <label>五、简答题（每空{{answerScores}}分，共{{paperStructures.answerScore}}分）</label><br>
    <ol>
        <li v-for="(shortAnswers,index) in shortAnswerss">
            <label class="font">{{shortAnswers.content}}</label><br>
            <div v-for="question in questionss">
                <input type="hidden" v-if="shortAnswers.id==question.shortAnswerId" :data-short="shortAnswers.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="shortAnswers.id==question.shortAnswerId" :data-shorts="shortAnswers.id"
                       :value="question.paperId">
            </div>
            <textarea name="key5.1" style="outline: none;" value="" :data-shortAnswers="shortAnswers.id" rows="5"
                      cols="30"
                      @change="short(shortAnswers.id,shortAnswers.id,$event)"></textarea>
            <br>
        </li>
    </ol>
    </p>
    <button type="button" class="btn btn-success" style="margin-left: 50%;" @click="examTest()">提交试卷</button>
    <br>
    <hr>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            p: 4,
            singleChoicess: [],
            multipleChoicess: [],
            blankFillingss: [],
            shortAnswerss: [],
            trueOrFalsess: [],
            paperStructures: [],
            singleScore: "",
            answerScores: "",
            completionScores: "",
            multipleChoiceScores: "",
            questionTotalScores: "",
            trueOrFalseScores: "",
            questionss: [],
            answerQuestion: [],
            time: "",
            name: "",
            question: [],
            answer: []
        },
        mounted() {	//当页面元素加载之前执行
            axios.get("/fullPaper/" + this.p)
                .then(res => {
                    console.info(res.data.data);
                    this.question = res.data.data;
                    this.time = res.data.data.time;
                    this.name = res.data.data.name;
                    this.singleChoicess = res.data.data.singleChoices;
                    this.multipleChoicess = res.data.data.multipleChoices;
                    this.blankFillingss = res.data.data.blankFillings;
                    this.trueOrFalsess = res.data.data.trueOrFalses;
                    this.shortAnswerss = res.data.data.shortAnswers;
                    this.paperStructures = res.data.data.paperStructure;
                    this.singleScore = this.paperStructures.singleChoiceScore / this.paperStructures.singleChoiceNum;
                    this.answerScores = this.paperStructures.answerScore / this.paperStructures.answerNum;
                    this.completionScores = this.paperStructures.completionScore / this.paperStructures.completionNum;
                    this.multipleChoiceScores = this.paperStructures.multipleChoiceScore / this.paperStructures.multipleChoiceNum;
                    this.questionTotalScores = this.paperStructures.questionTotalScore / this.paperStructures.questionTotalNum;
                    this.trueOrFalseScores = this.paperStructures.trueOrFalseScore / this.paperStructures.trueOrFalseNum;
                    this.questionss = res.data.data.questions;
                    console.log(this.singleScore);
                    console.log(this.singleChoicess);
                    console.log(this.name);
                    console.info(this.time);
                    axios.get("/getAnswer/" + this.p)
                        .then(res => {
                            this.answer = res.data.data;
                            let ques = this.questionss;
                            for (let i = 0; i < ques.length; i++) {
                                if (ques[i].singleChoiceId != 0) {
                                    let single = $("input[data-index=" + ques[i].singleChoiceId + "]")[0];
                                    let singles = $("input[data-single=" + ques[i].singleChoiceId + "]");
                                    for (let j = 0; j < singles.length; j++) {
                                        if (singles[j].value == this.answer[i].answer) {
                                            singles[j].checked = true;
                                        }
                                    }
                                }
                                if (ques[i].multipleChoiceId != 0) {
                                    let multiple = $("input[data-multiple=" + ques[i].multipleChoiceId + "]")[0];
                                    let multiples = $("input[data-multipless=" + ques[i].multipleChoiceId + "]");
                                    for (let j = 0; j < multiples.length; j++) {
                                        console.info(multiples.length + "+" + ques[i].multipleChoiceId);
                                        if (this.answer[i].answer.match(multiples[j].value)) {
                                            multiples[j].checked = true;
                                        }
                                    }
                                }
                                if (ques[i].trueOrFalseId != 0) {
                                    let trueOrFalses = $("input[data-trueOrFalse=" + ques[i].trueOrFalseId + "]");
                                    for (let j = 0; j < trueOrFalses.length; j++) {
                                        console.info(trueOrFalses.length + "+" + ques[i].trueOrFalseId);
                                        if (this.answer[i].answer == trueOrFalses[j].value) {
                                            trueOrFalses[j].checked = true;
                                        }
                                    }
                                }
                                if (ques[i].blankFillingId != 0) {
                                    let blankFillings = $("input[data-blankFillings=" + ques[i].blankFillingId + "]");
                                    console.info(blankFillings);
                                    for (let j = 0; j < blankFillings.length; j++) {
                                        console.info(blankFillings.length + "+" + ques[i].blankFillingId);
                                        blankFillings[j].value = this.answer[i].answer;
                                    }
                                }
                                if (ques[i].shortAnswerId != 0) {
                                    let shortAnswer = $("textarea[data-shortAnswers=" + ques[i].shortAnswerId + "]");
                                    console.info(shortAnswer);
                                    for (let j = 0; j < shortAnswer.length; j++) {
                                        console.info(shortAnswer.length + "+" + ques[i].shortAnswerId);
                                        shortAnswer[j].value = this.answer[i].answer;
                                    }
                                }
                            }
                            /*let single = $("input[data-index=" + singleId + "]")[0];
                            let multiple = $("input[data-multiple=" + multipleId + "]")[0];
                            let short = $("input[data-short=" + shortId + "]")[0];
                            let trueOrFalse = $("input[data-trueOrFalses=" + trueOrFalseId + "]")[0];
                            let blank = $("input[data-blank=" + blankId + "]")[0];
                            console.info(single, multiple, short, trueOrFalse, blank);*/
                        });
                });
        }, methods: {
            checkNames: function (index, multipleId, id, e) {
                /*alert(e.target.value);*/
                let inputH = $("input[data-multiple=" + multipleId + "]")[0];//jQuery对象转换成DOM对象
                let inputHs = $("input[data-multiples=" + multipleId + "]")[0];//jQuery对象转换成DOM对象
                /*alert("试卷ID: " + this.p);
                alert("QuestionNum: " + inputH.value);
                alert("paperId: " + inputHs.value);*/
                var asd = document.getElementsByName(index);
                /* alert(asd);*/
                var ans = "";
                for (let i = 0; i < asd.length; i++) {
                    if ($(asd[i]).attr("checked") == "checked") {
                        ans = ans + asd[i].value;
                    }
                }
                /*  alert(ans);*/
                axios({
                    method: "post",
                    url: "/insertAnswers",
                    data: {
                        "questionNum": inputH.value,
                        "paperId": inputHs.value,
                        "answer": ans,
                        "examId": this.p
                    },
                    header: {
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res => {
                    console.info(res.data.data);
                });
            },
            single: function (singleId, id, e) {
                /*alert(e.target.value);*/
                let inputH = $("input[data-index=" + singleId + "]")[0];//jQuery对象转换成DOM对象
                let inputHs = $("input[data-indexs=" + singleId + "]")[0];//jQuery对象转换成DOM对象
                /*alert("试卷ID: " + this.p);
                alert("QuestionNum: " + inputH.value);
                alert("paperId: " + inputHs.value);*/
                axios({
                    method: "post",
                    url: "/insertAnswers",
                    data: {
                        "questionNum": inputH.value,
                        "paperId": inputHs.value,
                        "answer": e.target.value,
                        "examId": this.p
                    },
                    header: {
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res => {
                    console.info(res.data.data);
                });
            },
            trueOrFalse: function (trueOrFalseId, id, e) {
                /*alert(e.target.value);*/
                let inputH = $("input[data-trueOrFalses=" + trueOrFalseId + "]")[0];//jQuery对象转换成DOM对象
                let inputHs = $("input[data-trueOrFalsess=" + trueOrFalseId + "]")[0];//jQuery对象转换成DOM对象
                /*alert("试卷ID: " + this.p);
                alert("QuestionNum: " + inputH.value);
                alert("paperId: " + inputHs.value);*/
                axios({
                    method: "post",
                    url: "/insertAnswers",
                    data: {
                        "questionNum": inputH.value,
                        "paperId": inputHs.value,
                        "answer": e.target.value,
                        "examId": this.p
                    },
                    header: {
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res => {
                    console.info(res.data.data);
                });
            },
            blank: function (blankId, id, e) {
                /*alert(e.target.value);*/
                let inputH = $("input[data-blank=" + blankId + "]")[0];//jQuery对象转换成DOM对象
                let inputHs = $("input[data-blanks=" + blankId + "]")[0];//jQuery对象转换成DOM对象
                /*alert("试卷ID: " + this.p);
                alert("QuestionNum: " + inputH.value);
                alert("paperId: " + inputHs.value);*/
                axios({
                    method: "post",
                    url: "/insertAnswers",
                    data: {
                        "questionNum": inputH.value,
                        "paperId": inputHs.value,
                        "answer": e.target.value,
                        "examId": this.p
                    },
                    header: {
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res => {
                    console.info(res.data.data);
                });
            },
            short: function (shortId, id, e) {
                /*alert(e.target.value);*/
                let inputH = $("input[data-short=" + shortId + "]")[0];//jQuery对象转换成DOM对象
                let inputHs = $("input[data-shorts=" + shortId + "]")[0];//jQuery对象转换成DOM对象
                /*alert("试卷ID: " + this.p);
                alert("QuestionNum: " + inputH.value);
                alert("paperId: " + inputHs.value);*/
                axios({
                    method: "post",
                    url: "/insertAnswers",
                    data: {
                        "questionNum": inputH.value,
                        "paperId": inputHs.value,
                        "answer": e.target.value,
                        "examId": this.p
                    },
                    header: {
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res => {
                    console.info(res.data.data);
                });
            },
            examTest: function () {
                alert("54545");
                axios.post("/updateStatus/" + this.p)
                    .then(res => {
                        if (res.data.code == 200) {
                            window.location.href = "exam.html";
                        }
                    });
            },
        }
    })
</script>
<SCRIPT LANGUAGE="JavaScript">
    function Timetimetime() {
        var maxtime;
        var time = document.getElementById("timetime").value;
        if (time > 0) {
            if (window.name == '' || window.name == '-1' || isNaN(window.name)) {
                maxtime = time * 60;
            } else {
                maxtime = window.name;
            }
            CountDown(maxtime);
        }
    }

    function CountDown(maxtime) {
        if (maxtime >= 0) {
            hours = Math.floor(maxtime / 3600);
            minutes = Math.floor((maxtime - hours * 3600) / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "距离考试结束还有" + hours + "时" + minutes + "分" + seconds + "秒";
            document.all["timer"].innerHTML = msg;
            if (maxtime == 5 * 60) alert('注意，还有5分钟!');
            --maxtime;
            window.name = maxtime;
        } else {
            clearInterval(timer);

            $.ajax({
                url: "/updateStatus/" + this.p,
                type: "post",
                success: function (data) {
                    if (data.code == 200) {
                        window.location.href = "exam.html";
                    }
                }
            })
        }
    }

    timer = setInterval("Timetimetime()", 1000);
</SCRIPT>
</body>
</html>
